import React, { useState, useEffect } from 'react';
import './request.less';
import { Button, Form, Input, Radio } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import Image from '../../static/images/BBD房子.png';
import axios from '../../utils/request';
import moment from 'moment';
import { Map } from 'react-bmapgl';
import { useHistory } from 'react-router-dom';
const { TextArea } = Input;
export default function System() {
  const history = useHistory();
  const [devices, setdevices] = useState([]);
  const [obj, setobj] = useState({});
  const show = async () => {
    let { data } = await axios.get('/zhy/devices');
    setdevices(data);
    console.log(data);
  };
  useEffect(() => {
    show();
  }, []);
  const [nums, setNums] = useState(1);
  const [value, setValue] = useState(1);
  const onChange = (e) => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };
  const onFinish = async (values: any) => {
    values.device_id = obj._id;
    values.num = nums;
    values.year = 1;
    values.begin_time = moment().format('YYYY-MM-DD');
    values.end_time = moment().add('year', 1).format('YYYY-MM-DD');
    console.log('Success:', values);
    let { data } = await axios.post('/zhy/applydevice', values);

    history.push('/home/management');
  };
  const [isshow, setisshow] = useState(0);
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  type FieldType = {
    门店名称?: string;
    门店位置?: string;
    门店logo?: string;
    门店照片?: string;
  };

  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState();
  const handleChange = (info) => {
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, (url) => {
        setLoading(false);
        setImageUrl(url);
      });
    }
  };
  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div
        style={{
          marginTop: 8,
        }}
      >
        Upload
      </div>
    </div>
  );

  return (
    <div className="quan_1">
      <div className="quan_2">
        <div className="header_1"></div>
        <div className="bottom_1"></div>
        <div className="ding1_1">
          <div className="headerding_1">
            <ul>
              <li
                style={{ fontSize: '2vh', fontWeight: '800', color: 'white' }}
              >
                门店管理
              </li>
              <li style={{ color: 'white' }}>
                <img
                  src={Image}
                  alt=""
                  style={{ width: '3vh', height: '3vh' }}
                />
              </li>
              <li style={{ color: 'white' }}>-</li>
              <li style={{ fontSize: '1.8vh', color: 'white' }}>设备管理</li>
              <li style={{ color: 'white' }}>-</li>
              <li style={{ fontSize: '1.8vh', color: 'white' }}>设备申请</li>
            </ul>
          </div>
          {isshow == 0 ? (
            <>
              {devices.map((item) => {
                return (
                  <div className="ding_1" key={item._id}>
                    <div className="ding_1_header">
                      {item.deviceKinds_id.device_name}
                    </div>
                    <div className="ding_1_image">
                      <img src={item.deviceimg} />
                    </div>
                    <div className="ding_1_content">
                      <ul>
                        <li>1立方米存储空间</li>
                        <li>IPX-7级别防水，水下1米可以浸泡30分钟。</li>
                        <li>全钢加厚机身</li>
                        <li>3D立体面板</li>
                        <li>光电收货检测</li>
                        <li>进口压缩机，自动压缩货物</li>
                        <li>高亮LED照明</li>
                        <li>智能云平台</li>
                      </ul>
                      <p>
                        ￥<span>{item.price}.00</span>/年
                      </p>
                    </div>
                    <div className="ding_1_footer">
                      <Button
                        type="primary"
                        style={{
                          width: '90%',
                          height: '5vh',
                          marginLeft: '5%',
                          marginTop: '5%',
                          borderRadius: '10px',
                          background: '#5e72e4',
                        }}
                        onClick={() => {
                          setisshow(1);
                          setobj(item);
                        }}
                      >
                        立即申请
                      </Button>
                    </div>
                  </div>
                );
              })}
            </>
          ) : isshow == 1 ? (
            <>
              <div className="ding_1_info">
                <div className="ding_1_info_header">
                  <span>设备申请</span>
                </div>
                <div className="ding_1_info_left">
                  <img src={obj.deviceimg} />
                </div>
                <div className="ding_1_info_right">
                  <ul>
                    <li>1立方米存储空间</li>
                    <li>IPX-7级别防水，水下1米可以浸泡30分钟。</li>
                    <li>全钢加厚机身</li>
                    <li>3D立体面板</li>
                    <li>光电收货检测</li>
                    <li>进口压缩机，自动压缩货物</li>
                    <li>高亮LED照明</li>
                    <li>智能云平台</li>
                  </ul>
                  <p>
                    租金:￥<span>{obj.price}.00</span>/年{' '}
                    <span style={{ marginLeft: '30px' }}>9折优惠</span>{' '}
                  </p>
                  <div className="ding_1_info_footer">
                    <Button
                      style={{ border: '1px solid #5e72e4', color: '#35e72e4' }}
                      onClick={() => {
                        setisshow(0);
                      }}
                    >
                      返回重选
                    </Button>
                    <Button
                      style={{
                        background: '#5e72e4',
                        color: 'white',
                        border: '1px solid #5e72e4',
                      }}
                      onClick={() => {
                        setisshow(2);
                        console.log(obj);
                      }}
                    >
                      立即申请
                    </Button>
                  </div>
                </div>
              </div>
            </>
          ) : (
            <>
              <div className="ding_1_info_form">
                <div className="ding_1_info_form_header">
                  <span>设备申请确认</span>
                </div>
                <div className="ding_1_info_form_content">
                  <div className="box1">
                    <h3
                      style={{
                        marginLeft: '16px',
                        marginTop: '10px',
                        fontWeight: 'bold',
                      }}
                    >
                      设备信息
                    </h3>
                    <table style={{ marginLeft: '5%' }}>
                      <tr style={{ height: '60px' }}>
                        <td>设备型号:</td>
                        <td style={{ width: '180px' }}>{obj.deviceModel}</td>
                        <td>设备储量:</td>
                        <td style={{ width: '180px' }}>{obj.size}m3</td>
                        <td>防水等级:</td>
                        <td style={{ width: '180px' }}>{obj.waterproof}</td>
                        <td>质量:</td>
                        <td>{obj.quality}</td>
                      </tr>
                      <tr>
                        <td>保修:</td>
                        <td style={{ width: '180px' }}>{obj.maintenance}年</td>
                        <td>包换:</td>
                        <td style={{ width: '180px' }}>{obj.maintenance}年</td>
                      </tr>
                    </table>
                  </div>
                  <div className="box2">
                    <h3
                      style={{
                        marginLeft: '16px',
                        marginTop: '10px',
                        fontWeight: 'bold',
                      }}
                    >
                      订单信息
                    </h3>
                    <table style={{ marginLeft: '5%' }}>
                      <tr style={{ height: '60px' }}>
                        <td>设备型号:</td>
                        <td style={{ width: '180px' }}>{obj.deviceModel}</td>
                        <td>租用价格:</td>
                        <td style={{ width: '180px' }}>{obj.price}.00/年</td>
                      </tr>
                      <tr>
                        <td>租用台数:</td>
                        <td>
                          <button
                            disabled={nums == 1}
                            style={{ float: 'left', width: '20px' }}
                            onClick={(e) => {
                              setNums((obj.num -= 1));
                            }}
                          >
                            -
                          </button>
                          <input
                            value={nums}
                            style={{
                              float: 'left',
                              width: '50px',
                              textAlign: 'center',
                            }}
                          ></input>
                          <button
                            style={{ float: 'left', width: '20px' }}
                            onClick={(e) => {
                              setNums((obj.num += 1));
                            }}
                          >
                            +
                          </button>{' '}
                        </td>
                      </tr>
                      <tr
                        style={{
                          height: '60px',
                          color: 'red',
                          fontSize: '17px',
                        }}
                      >
                        <td>订单总额:</td>
                        <td>¥ {obj.num * obj.price}/年 </td>
                      </tr>
                    </table>
                  </div>
                  <div className="box_form">
                    <h3
                      style={{
                        marginLeft: '16px',
                        marginTop: '10px',
                        fontWeight: 'bold',
                      }}
                    >
                      物流信息
                    </h3>
                    <div className="lefts">
                      <Form
                        name="basic"
                        labelCol={{
                          span: 8,
                        }}
                        wrapperCol={{
                          span: 16,
                        }}
                        style={{
                          maxWidth: 600,
                          marginLeft: '-5%',
                        }}
                        initialValues={{
                          remember: true,
                        }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                      >
                        <Form.Item
                          label="收货人"
                          name="revorname"
                          rules={[
                            {
                              required: true,
                              message: '请输入收货人名称',
                            },
                          ]}
                        >
                          <Input style={{ borderRadius: '50px' }} />
                        </Form.Item>

                        <Form.Item
                          label="联系方式"
                          name="phone"
                          rules={[
                            {
                              required: true,
                              message: '请输入收货人的手机号!',
                              pattern: /^[1][3-9][0-9]{9}$/,
                            },
                          ]}
                        >
                          <Input style={{ borderRadius: '50px' }} />
                        </Form.Item>
                        <Form.Item
                          label="收货地址"
                          name="address"
                          rules={[
                            {
                              required: true,
                              message: '请输入收货地址!',
                            },
                          ]}
                        >
                          <Input style={{ borderRadius: '50px' }} />
                        </Form.Item>

                        <Form.Item
                          label="安装服务"
                          name="serve"
                          rules={[
                            {
                              required: true,
                              message: 'Please input your password!',
                            },
                          ]}
                        >
                          <Radio.Group onChange={onChange} value={value}>
                            <Radio value={1}>需要</Radio>
                            <Radio value={2}>不需要</Radio>
                          </Radio.Group>
                        </Form.Item>
                        <Form.Item
                          label="备注信息"
                          name="content"
                          rules={[
                            {
                              required: true,
                              message: '请输入备注信息！',
                            },
                          ]}
                        >
                          <TextArea rows={4} />
                        </Form.Item>
                        <Form.Item
                          wrapperCol={{
                            offset: 8,
                            span: 16,
                          }}
                          style={{ position: 'fixed', right: '20%' }}
                        >
                          <Button
                            type="primary"
                            htmlType="submit"
                            style={{
                              position: 'fixed',
                              right: '13%',
                              width: '120px',
                              height: '40px',
                              marginTop: '-10px',
                              borderRadius: '5px',
                              boxShadow: '0px 3px 5px rgba(0,0,0,.6)',
                              background: '#5e72e4',
                            }}
                          >
                            确认申请
                          </Button>
                          <Button
                            onClick={() => {
                              setisshow(0);
                            }}
                            type="primary"
                            style={{
                              position: 'fixed',
                              right: '20%',
                              width: '120px',
                              height: '40px',
                              marginTop: '-10px',
                              borderRadius: '5px',
                              boxShadow: '0px 3px 5px rgba(0,0,0,.6)',
                              background: 'white',
                              color: '#5e72e4',
                              borderColor: '#5e72e4',
                            }}
                          >
                            取消申请
                          </Button>
                        </Form.Item>
                      </Form>
                    </div>
                    <div className="rights">
                      <h3
                        style={{
                          marginLeft: '10%',
                          fontSize: '15px',
                          fontWeight: 'bold',
                        }}
                      >
                        点击地图选择你的门店位置
                      </h3>
                      <div
                        style={{
                          width: '80%',
                          margin: '-5px auto',
                          height: '45%',
                        }}
                      >
                        <Map
                          center={new BMapGL.Point(116.404449, 39.914889)}
                          zoom={12}
                          heading={0}
                          tilt={40}
                          onClick={(e: any) => {}}
                          enableScrollWheelZoom
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}
